<template>
  <h2>child3组件 - state</h2>
  <div>name: {{ name }}</div>
  <div>age: {{ age }}</div>
  <div>height: {{ height2 }}</div>
  <div>doubleNum: {{ doubleNum }}</div>
  <div>str: {{ reverseStr }}</div>
</template>

<script>
// mapState辅助函数，用于简化代码
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      lastname: "san",
      num: 10,
    };
  },

  // computed: {
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   height2() {
  //     return this.$store.state.height;
  //   },
  //   doubleNum() {
  //     return this.num * 2;
  //   },
  // },

  // mapState的数组语法
  // computed: mapState(["name", "age", "height"]),

  // mapState的对象语法
  computed: {
    ...mapState({
      // 写函数的时候，如果使用到this，只能写成普通函数
      name(state) {
        return state.name + this.lastname;
      },
      // 写函数用于在原先的基础上做转化
      age: (state) => state.age + 1,
      // 引入以后重新取名
      height2: "height",
      // str: (state) => state.str.split("").reverse().join(""),
    }),
    ...mapGetters(["reverseStr"]),
    doubleNum() {
      return this.num * 2;
    },
  },
};
</script>
